<template>
	<div>
		<el-form :inline="true" :model="queryForm" ref="queryForm" size="small" class="demo-form-inline">
			<el-form-item label="商品名称" prop="gname">
				<el-input v-model="queryForm.goods.gname"></el-input>
			</el-form-item>
			<el-form-item label="审批状态" prop="processStatus">
				<el-select v-model="queryForm.processStatus" placeholder="请选择">
					<el-option v-for="item in dicAuditStateData" :key="item.dicDataId" :label="item.dicDataLabel"
						:value="item.dicDataLabel">
						<span style="float: left">{{ item.dicDataLabel }}</span>
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" size="mini" @click="getTableData()" icon="el-icon-search">搜索</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="resetQueryForm()">重置</el-button>
			</el-form-item>
		</el-form>
		<el-button type="primary" size="mini" icon="el-icon-plus" @click="showAddDialog()" plain>新增
		</el-button>
		<el-table ref="multipleTable" :data="TableData" tooltip-effect="dark" style="margin-top:20px;">
			<el-table-column type="index" width="50">
			</el-table-column>
			<el-table-column prop="goods.gname" label="商品名称" width="310px">
			</el-table-column>
			<el-table-column prop="goods.shopPrice" label="原商城价" width="100px">
			</el-table-column>
			<el-table-column prop="goods.marketPrice" label="原市场价" width="100px">
			</el-table-column>
			<el-table-column prop="adjustShoppingPrice" label="市场价" width="100px">
			</el-table-column>
			<el-table-column prop="adjustMarketPrice" label="商城价" width="100px">
			</el-table-column>
			<el-table-column prop="beginTime" label="希望价格生效时间" width="150px">
			</el-table-column>
			<el-table-column prop="processStatus" label="审核状态">
			</el-table-column>
			<el-table-column label="操作" align="center">
				<template slot-scope="scope">
					<el-button size="mini" @click="showInfoDialog(scope.$index, scope.row)" style="margin-left: 30px;">
						查看
					</el-button>
					<el-button size="mini" @click="showEditDialog(scope.$index, scope.row)" style="margin-left: 15px;"
						v-show="scope.row.processStatus=='草稿'">修改
					</el-button>
					<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)"
						style="margin-left: 15px;" v-show="scope.row.processStatus=='草稿'">删除
					</el-button>
					<el-button size="mini" @click="auditTrail(scope.$index, scope.row)" style="margin-left: 15px;">审核跟踪
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:current-page="queryForm.pageNum" :page-sizes="[ 5, 8, 10]" :page-size="queryForm.pageSize"
			layout="->, total, sizes, prev, pager, next, jumper" :total="totalNum">
		</el-pagination>

		<el-dialog :title="addFormDialogTitle" :visible.sync="addFormVisible" width="40%">
			<el-form :model="addPriceForm" size="small" hide-required-asterisk ref="addPriceForm" label-width="70px">
				<el-form-item label="" label-width="160px">
					<el-button type="primary" size="mini" @click="selectGoods()" v-show="isAddOrEdit">选择商品</el-button>
				</el-form-item>
				<el-form-item label="商品编码" label-width="160px">
					<el-input disabled v-model="addPriceForm.goods.gcode" placeholder="请选择商品信息" size="mini"
						style="width: 300px;"></el-input>
				</el-form-item>
				<el-form-item label="商品名称" label-width="160px">
					<el-input disabled v-model="addPriceForm.goods.gname" size="mini" style="width: 300px;"></el-input>
				</el-form-item>
				<el-form-item label="商品库存" label-width="160px">
					<el-input disabled v-model="addPriceForm.goods.stock" size="mini" style="width: 300px;"></el-input>
				</el-form-item>
				<el-form-item label="商品原始价格" label-width="160px">
					市场价：<el-input disabled v-model="addPriceForm.goods.marketPrice" size="mini" style="width:150px">
					</el-input>
					商城价：<el-input disabled v-model="addPriceForm.goods.shopPrice" size="mini" style="width:150px">
					</el-input>
				</el-form-item>
				<el-form-item label="商品调价幅度" label-width="160px">
					<div>
						<el-radio-group v-model="addPriceForm.adjustWay" @change="onRadioAddChange">
							<el-radio label="绝对值" value="绝对值"></el-radio>
							<el-radio label="百分比" value="百分比"></el-radio>
							<el-input v-show="inputAddshow" @input="calAddFun" v-model="addPriceForm.percent"
								style="width: 50px;">
							</el-input>
						</el-radio-group>
					</div>
					<div>
						新市场价：<el-input v-model="addPriceForm.adjustMarketPrice" size="mini" style="width:150px"
							:disabled="inputAddshow">
						</el-input>
						新商城价：<el-input v-model="addPriceForm.adjustShoppingPrice" size="mini" style="width:150px"
							:disabled="inputAddshow">
						</el-input>
					</div>
				</el-form-item>
				<el-form-item label="希望价格生效时间" label-width="160px">
					<el-date-picker v-model="addPriceForm.beginTime" type="date" value-format="yyyy-MM-dd"
						placeholder="选择日期" size="mini" style="width: 300px;">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="希望价格失效时间" label-width="160px">
					<el-date-picker v-model="addPriceForm.endTime" type="date" value-format="yyyy-MM-dd"
						placeholder="选择日期" size="mini" style="width: 300px;">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="活动情况或原因" label-width="160px">
					<el-input type="textarea" :autosize="{ minRows: 1, maxRows: 10}" placeholder="请输入活动情况或原因说明"
						v-model="addPriceForm.reason" size="mini" style="width: 300px;">
					</el-input>
				</el-form-item>
				<el-form-item label="备注" label-width="160px">
					<el-input type="textarea" :autosize="{ minRows: 1, maxRows: 10}" placeholder="请输入备注信息"
						v-model="addPriceForm.remark" size="mini" style="width: 300px;">
					</el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="addPriceFormSubmit()" v-show="isAddOrEdit">保存草稿</el-button>
				<el-button type="primary" @click="startProcess()" v-show="isAddOrEdit">提交审核</el-button>
			</span>
		</el-dialog>

		<el-dialog title="商品查询" :visible.sync="selectGoodsFormVisble" width="80%">
			<el-form :inline="true" size="small" :model="queryFormGoods" ref="queryFormGoods" style="margin-left: 15px;"
				class="demo-form-inline">
				<el-form-item label="商品名称:" prop="gsName">
					<el-input v-model="queryFormGoods.gname" placeholder="商品名称" style="width:140px"></el-input>
				</el-form-item>
				<el-form-item label="商品编码:" prop="model">
					<el-input v-model="queryFormGoods.gcode" placeholder="商品编码" style="width:140px"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" size="mini" @click="searchTableDataGoods()" icon="el-icon-search" plain>搜索
					</el-button>
					<el-button icon="el-icon-refresh" size="mini" @click="resetqueryFormGoods()" plain>重置
					</el-button>
				</el-form-item>
			</el-form>
			<el-table ref="tableData" :data="tableData" tooltip-effect="dark">
				<el-table-column prop="id" label="序号" min-width="25%" align="center"></el-table-column>
				<el-table-column prop="gname" label="商品名称" min-width="105%" align="center"></el-table-column>
				<el-table-column prop="gbrand" label="商品品牌" min-width="65%" align="center"></el-table-column>
				<el-table-column prop="gmodel" label="商品型号" min-width="75%" align="center"></el-table-column>
				<el-table-column prop="gcolor" label="商品颜色" min-width="40%" align="center">
					<template slot-scope="scope">
						<div v-for="item in colorTypes" :key="item.dicDataId" :label="item.dicDataLabel"
							:value="item.dicDataVal">
							<div v-if="scope.row.gcolor == item.dicDataVal">
								{{item.dicDataLabel}}
								</v-if>
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="marketPrice" label="市场价格" min-width="40%" align="center">
				</el-table-column>
				<el-table-column prop="stock" label="库存" min-width="35%" align="center"></el-table-column>
				<el-table-column prop="operate" label="操作" min-width="105%" align="center">
					<template slot-scope="scope">
						<el-button type="success" size="mini" icon="el-icon-edit"
							@click="selectThisGoods(scope.$index, scope.row)" plain>选择</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-dialog>
		<el-dialog title="审核记录" :visible.sync="processTaskVisble" width="70%">
			<el-table ref="processTaskTableData" :data="processTaskTableData" tooltip-effect="dark">
				<el-table-column prop="taskName" label="任务名"  align="center"></el-table-column>
				<el-table-column prop="taskUser" label="审批人员" align="center"></el-table-column>
				<el-table-column prop="taskBegin" label="产生时间"  align="center"></el-table-column>
				<el-table-column prop="claimTime" label="签收时间"  align="center"></el-table-column>
				<el-table-column prop="taskEnd" label="审核时间"  align="center"></el-table-column>
				<el-table-column prop="approveResult" label="结果" align="center"></el-table-column>
				<el-table-column prop="approveContent" label="意见" align="center"></el-table-column>
			</el-table>
		</el-dialog>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				totalGoodsNum: 0,
				brandData: [],
				goodsData: [],
				colorTypes: [],
				queryFormGoods: {
					gname: '',
					gcode: '',
				},
				tableData: [],
				selectGoodsFormVisble: false,
				processTaskVisble:false,
				processTaskTableData:[],
				addPriceForm: {
					id: null,
					goods: {
						id: '',
						gname: '',
						gcode: '',
						marketPrice: 0.0,
						shopPrice: 0.0,
						stock: 0
					},
					adjustWay: '绝对值',
					percent: 0,
					adjustMarketPrice: 0.0,
					adjustShoppingPrice: 0.0,
					processStatus: '草稿',
					beginTime: '',
					endTime: '',
					reason: '',
					remark: '',
					goodsId: '',
					applyUser: ''
				},
				addFormDialogTitle: '',
				idAddOrEdit: true,
				addFormVisible: false,
				inputshow: false,
				inputAddshow: false,
				isAddOrEdit:false,
				editPriceForm: {},
				editFormVisible: false,
				infoPriceForm: {},
				// 调价详情弹出框可见性
				infoFormVisible: false,
				TableData: [],
				queryForm: {
					goods: {
						gname: ''
					},
					processStatus: '',
					pageNum: 1,
					pageSize: 10
				},
				totalNum: 0,
				dicAuditStateData: [],
				dicAdjustWayData: []
			}
		},
		methods: {
			selectThisGoods(index, row) {
				this.selectGoodsFormVisble = false;
				if (this.addFormVisible == true) {
					this.addPriceForm.goods = row;
					this.addPriceForm.goodsName = row.gsName;
					this.addPriceForm.goodsId = row.id;
				}
			},
			//手机品牌种类查询
			// 重置查询框
			resetqueryFormGoods() {
				this.resetRepData();
				this.tableData = [];
			},
			resetRepData() {
				this.queryFormGoods = {
					id: '',
					gname: '',
					gcode: '',
					gbrand: [],
					gmodel: '',
					gcolor: '',
					dicDataLabel: '',
					dicDataVal: '',
					marketPrice: '',
					stock: '',
					remark: '',
					pageNum: 1,
					pageSize: 5,
				}
			},
			//点击搜索触发
			searchTableDataGoods() {
				this.getSelectTableData();
			},
			//改变每页显示的条数
			handleGoodsSizeChange(val) {
				this.queryFormGoods.pageSize = val;
				this.queryFormGoods.pageNum = 1;
				this.getSelectTableData();
			},
			// 翻页
			handleGoodsCurrentChange(val) {
				this.queryFormGoods.pageNum = val;
				this.getSelectTableData();
			},
			getSelectTableData() {
				this.$axios.get("/goods/select", {
						params: this.queryFormGoods
					})
					.then(resp => {
						this.tableData = resp.list;
						this.totalGoodsNum = resp.total;
					})
			},
			addPriceFormSubmit() {
				let id = this.addPriceForm.id;
				if (id == null || id == '') {
					this.doAdd();
				} else {
					this.doEdit();
				}
			},
			startProcess(){
				axios.post('/prices/start',this.addPriceForm).then(resp=>{
					if(resp.code==20000){
						this.suc("启动成功");
						this.getTableData();
						this.addFormVisible = false;
					}else{
						this.error("启动失败");
					}
				})
				
			},
			calFun() {
				let numStr = this.editPriceForm.percent;
				let num = parseInt(numStr);
				this.editPriceForm.adjustMarketPrice = num / 100 * this.editPriceForm.marketPrice;
				this.editPriceForm.adjustShoppingPrice = num / 100 * this.editPriceForm.shopPrice;
			},
			calAddFun() {
				let numStr1 = this.addPriceForm.percent;
				this.addPriceForm.adjustMarketPrice = parseFloat(((parseInt(numStr1) / 100) * this.addPriceForm.goods
					.marketPrice).toFixed(2));
				this.addPriceForm.adjustShoppingPrice = parseFloat(((parseInt(numStr1) / 100) * this.addPriceForm.goods
					.shopPrice).toFixed(2));
			},
			onRadioChange(val) {
				if (val == 1) {
					this.inputshow = true;
				} else {
					this.inputshow = false;
					this.editPriceForm.percent = 0;
				}
			},
			onRadioAddChange(val) {
				if (val == '百分比') {
					this.inputAddshow = true;
				} else {
					this.inputAddshow = false;
					this.addPriceForm.percent = 0;
				}
			},
			// 选择商品
			selectGoods() {
				this.selectGoodsFormVisble = true;
				this.tableData = [];
			},
			// 修改弹出框提交按钮
			doEdit() {
				this.$axios.put('/prices', this.addPriceForm).then(resp => {
					if (resp.code == 20000) {
						this.suc("修改成功");
					} else {
						this.error("修改失败")
					}
					this.getTableData();
					this.addFormVisible = false;
				})
			},
			doAdd() {
				this.$axios.post('/prices', this.addPriceForm).then(resp => {
					if (resp.code == 20000) {
						this.suc("新增成功");
					} else {
						this.error("新增失败");
					}
					this.getTableData();
					this.addFormVisible = false;
				});
			},
			//改变每页显示的条数
			handleSizeChange(val) {
				this.queryForm.pageSize = val;
				this.queryForm.pageNum = 1;
				this.getTableData();
			},
			// 翻页
			handleCurrentChange(val) {
				this.queryForm.pageNum = val;
				this.getTableData();
			},
			// 审核跟踪
			auditTrail(index, row) {
				axios.get('/prices/audit/'+row.id).then(resp=>{
					this.processTaskVisble=true;
					this.processTaskTableData=resp.data;
				})
			},
			// 删除
			handleDelete(index, row) {
				this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					axios.delete(`/prices/${row.id}`).then(resp => {
						if (resp.code == 20000) {
							this.suc('删除成功!');
						} else {
							this.error("删除失败!");
						}
						this.getTableData();
					})
				}).catch(() => {
					this.info("已取消删除");
				});
			},
			// 修改
			showEditDialog(index, row) {
				this.resetAddPriceForm();
				this.getSelectTableData(); //查询所有并带条件
				this.addFormVisible = true;
				this.addFormDialogTitle = "修改价格调整申请单";
				this.isAddOrEdit = true;
				this.addPriceForm = JSON.parse(JSON.stringify(row));
			},
			// 查看
			showInfoDialog(index, row) {
				this.resetAddPriceForm();
				this.addFormVisible = true;
				this.addFormDialogTitle = '查看价格调整申请单';
				this.isAddOrEdit = false;
				this.addPriceForm = JSON.parse(JSON.stringify(row));
			},
			resetQueryForm() {
				this.queryForm = {
					goods: {
						gname: ''
					},
					processStatus: '',
					pageNum: 1,
					pageSize: 10
				};
				this.getTableData();
			},
			showAddDialog() {
				this.resetAddPriceForm();
				this.inputAddshow = false;
				this.addFormVisible = true;
				this.addFormDialogTitle = '添加价格调整申请单';
				this.isAddOrEdit = "true";
			},
			getTableData() {
				axios.get("/prices?" + this.$qs.stringify(this.queryForm, {
					allowDots: true
				})).then(resp => {
					this.TableData = resp.list;
					this.totalNum = resp.total;
					this.queryForm.pageNum = resp.pageNum;
					this.queryForm.pageSize = resp.pageSize;
				})
			},
			resetAddPriceForm() {
				this.addPriceForm = {
					id: null,
					goods: {
						id: '',
						gname: '',
						gcode: '',
						marketPrice: 0.0,
						shopPrice: 0.0,
						stock: 0
					},
					adjustWay: '绝对值',
					percent: 0.0,
					adjustMarketPrice: 0.0,
					adjustShoppingPrice: 0.0,
					processStatus: '草稿',
					beginTime: '',
					endTime: '',
					reason: '',
					remark: '',
					goodsId: '',
					applyUser: ''
				};
			}
		},
		created() {
			this.getDictItems("review").then(resp => {
				this.dicAuditStateData = resp.data;
			});
			this.getDictItems("phone_color").then(resp => {
				this.colorTypes = resp.data;
			});
		},
		mounted() {
			this.getTableData();
		}
	}
</script>

<style>
	.el-dialog__body {
		padding: 5px 20px;
		color: #606266;
		font-size: 14px;
		word-break: break-all;
	}

	.el-input__inner {
		-webkit-appearance: none;
		background-color: #FFF;
		border-radius: 4px;
		border: 1px solid #DCDFE6;
		box-sizing: border-box;
		color: #606266;
		display: inline-block;
		font-size: inherit;
		height: 40px;
		line-height: 40px;
		outline: 0;
		padding: 0 15px;
		transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
		width: 90%;
	}

	.el-textarea__inner {
		display: block;
		resize: vertical;
		padding: 5px 15px;
		line-height: 1.5;
		box-sizing: border-box;
		width: 90%;
		font-size: inherit;
		color: #606266;
		background-color: #FFF;
		border: 1px solid #DCDFE6;
		border-radius: 4px;
		transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
	}

	.el-row {
		margin-bottom: 20px;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.el-col {
		border-radius: 4px;
	}

	.bg-purple-dark {
		background: #99a9bf;
	}

	.bg-purple {
		background: #d3dce6;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.grid-content {
		border-radius: 4px;
		min-height: 36px;
	}

	.row-bg {
		padding: 10px 0;
		background-color: #f9fafc;
	}
</style>
